import { List, Divider, Space, Avatar, Tag } from 'antd';
import { LikeOutlined} from '@ant-design/icons';
import { useState } from 'react';
import React from 'react';
import './UserBlock.css';
const data = [
    {
      title: '操作系统',
      time:'2022-10-2 15:00:23',
      bool:'false'
    },
    {
      title: '计算机网络',
      time:'2022-10-19 6:10:26',
      bool:'true'
    },
    {
      title: '软件工程管理',
      time:'2022-11-9 9:23:53',
      bool:'true'
    }
];

const UserBlock = () => {
    /* color */
    const [color, setColor] = useState('#bed742a5')
    const [sex, setSex] = useState('男')
    const [dir, setDir] = useState(0)
    const [reply, setReply] = useState(0)
    const [admin, setAdmin] = useState('否')
    //这里显示通过/不通过的tag颜色需要通过后端的数据来判断

    return (
        <div className='container'>
            
            <div className='main'>
                {/* <div style = {{color:'#14919b'}} >
                    <Tag color="cyan">管理员地址</Tag>
                    <span style = {{color:'#044e54'}}>{"SSSS"}</span>
                </div> */}
                <Space>
                    <Avatar style={{ backgroundColor: '#198bdd', verticalAlign: 'large' }} size="large" >
                        <b>{"头像"}</b>
                    </Avatar>
                        <span style = {{color:'#6dbbf2'}}>用户名</span>
                        {/* <h6> 注册用户</h6> */}
                    <div>
                        <Tag color="#55acee" icon = {<LikeOutlined />}>收到的赞</Tag>
                        <Tag color="#55acee">{0}</Tag>
                    </div>
                </Space>
                <Divider orientation="left" plain style = {{color:'#829ab1'}}>Info</Divider>
                <Space>
                    <div id="info">
                        <Space>
                        <span style = {{color:'#6dbbf2'}}><b>性别</b> {sex}</span>
                        <span style = {{color:'#6dbbf2'}}><b>发帖数</b> {reply}</span>
                        <span style = {{color:'#6dbbf2'}}><b>上传资料数</b> {dir}</span>
                        <span style = {{color:'#6dbbf2'}}><b>管理员</b> {admin}</span>
                        </Space>
                    </div>
                </Space>
                
                <Divider orientation='left' style = {{color:'#829ab1'}} plain>上传的资料</Divider>
                <List
                    itemLayout="horizontal"
                    dataSource={data}
                    renderItem={item => (
                    <List.Item>
                        <List.Item.Meta
                        title = {<span style={{color:'#4fabec'}}>{item.title}</span>}
                        description={
                            <Space>
                                <Tag color={color} >通过</Tag>
                                {/* <Tag color='#ef963ec4'>失败</Tag> */}
                            <div>{item.time}</div>
                            </Space>
                        }
                        />
                    </List.Item>
                    )}
                />
            </div>
        </div>
    )
}


export default UserBlock
